<template>
  <div class="security-container">
    <div class="flex secur-item">
      <div class="flex item-left">
        <img class="item-icon" src="@/assets/iconDingTalk.png" />
        <div class="info">
          <div class="title">钉钉账号</div>
          <span v-if="!isBindThirdAccount(1)" class="tip">未绑定钉钉账号</span>
          <span v-else class="tip">已绑定了钉钉账号：{{ bindThirdAccountName(1) }}，<span class="actions-text" type="text" @click="unbindDingTalk">点击解绑</span></span>
        </div>
      </div>
      <el-button v-if="!isBindThirdAccount(1)" type="text" @click="handleChangeDingTalk"> 绑定 </el-button>
    </div>

    <!-- <div class="flex secur-item">
      <div class="flex item-left">
        <img class="item-icon" src="@/assets/iconWx.png" />
        <div class="info">
          <div class="title">微信账号</div>
          <span v-if="!isBindThirdAccount(2)" class="tip">未绑定微信账号</span>
          <span v-else class="tip">已绑定了微信账号：{{ bindThirdAccountName(2) }}，<span class="actions-text" type="text" @click="unbindWx">点击解绑</span></span>
        </div>
      </div>
      <el-button v-if="!isBindThirdAccount(2)" type="text" @click="handleChangeWeChat">绑定</el-button>
    </div> -->

    <DingTalk ref="dingTalk" />
    <WeChat ref="weChat" />
  </div>
</template>

<script>
import DingTalk from './dingTalk'
import WeChat from './wechat'
import { ucApi } from '@/api/api.js'

export default {
  components: {
    DingTalk,
    WeChat
  },
  data() {
    return {
      thirdAccountList: []
    }
  },
  computed: {
    // 是否绑定了第三方账号
    isBindThirdAccount() {
      // 1：钉钉 2：微信
      return function (type) {
        return this.thirdAccountList.some((item) => {
          return item.type === type
        })
      }
    },
    // 返回绑定的第三方账号的用户名
    bindThirdAccountName() {
      // 1：钉钉 2：微信
      return function (type) {
        return this.thirdAccountList.filter((item) => {
          return item.type === type
        })[0]['name']
      }
    }
  },
  created() {
    this.getThirdAccounts()
  },
  methods: {
    // 解绑钉钉操作
    unbindDingTalk() {
      // this.$request(ucApi.unbindDingTalk).then((res) => {
      //   if (res.code === 1) {
      //     this.$message({
      //       message: '解绑成功',
      //       type: 'success'
      //     })
      //     this.getThirdAccounts()
      //   }
      // })
      const dingTalkDialog = this.$refs.dingTalk
      dingTalkDialog.settings.title = '解绑钉钉'
      dingTalkDialog.settings.unbandFlag = true
      dingTalkDialog.settings.visible = true
    },
    // 解绑微信操作
    async unbindWx() {
      // try {
      //   const res = await this.$request(ucApi.unbindWechat)
      //   if (res.code === 1) {
      //     this.$message({
      //       message: '解绑成功',
      //       type: 'success'
      //     })
      //     this.getThirdAccounts()
      //   }
      // } catch (error) {
      //   console.log(error)
      // }
      const weChatDialog = this.$refs.weChat
      weChatDialog.settings.title = '解绑微信'
      weChatDialog.settings.unbandFlag = true
      weChatDialog.settings.visible = true
    },
    // 获取第三方账号列表
    async getThirdAccounts() {
      const res = await this.$request(ucApi.getThirdAccounts)
      this.thirdAccountList = res.data
    },
    // 修改钉钉账号
    handleChangeDingTalk() {
      const dingTalkDialog = this.$refs.dingTalk
      dingTalkDialog.settings.title = '钉钉账号'
      dingTalkDialog.settings.visible = true
    },
    // 修改钉钉账号
    handleChangeWeChat() {
      const weChatDialog = this.$refs.weChat
      weChatDialog.settings.title = '微信账号'
      weChatDialog.settings.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.security-container {
  padding: 28px 0 0;
  .secur-item {
    margin-bottom: 45px;
    .item-icon {
      border-radius: 50%;
      width: 44px;
      height: 44px;
    }
    .info {
      font-family: Microsoft YaHei;
      margin-left: 14px;
      .title {
        font-size: 17px;
        font-weight: 400;
        color: #333;
        margin-bottom: 7px;
      }
      .tip {
        font-size: 15px;
        font-weight: 400;
        color: #999;
      }
      .actions-text {
        color: #1890ff;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }
}
</style>
